<template>
  <a-popover title="自定义列" trigger="click" placement="leftBottom">
    <template slot="content">
      <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
        <a-row style="width: 400px">
          <template v-for="(item,index) in defColumns_">
            <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
            </template>
          </template>
        </a-row>
      </a-checkbox-group>
    </template>
    <a><a-icon type="setting" />设置</a>
  </a-popover>
</template>

<script>
import Vue from 'vue'
import Sortable from 'sortablejs'

export default {
  name: 'ListColumnsSetter',

  props: {
    defColumns: {
      type: Array,
      required: true,
    },
    listName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      settingColumns: [],
      columns_ : [],
      defColumns_ :[]
    }
  },

  computed: {
    ls_key() {
      return this.$route.name + '/' + this.listName + ':colsettings'
    },
    ls_sort_key(){
      return this.$route.name + '/' + this.listName + 'sort:colsettings'
    }
  },

  mounted() {
    let that = this
    this.defColumns_.push(...this.defColumns)
    this.initColumns()
  },

  methods: {
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns_ = colAuthFilter(this.defColumns_,'testdemo:');
        var key = this.$route.name+":colsettings";
        let colSettings= Vue.ls.get(this.ls_key);
        if(colSettings==null||colSettings==undefined){
          let allSettingColumns = [];
          this.defColumns.forEach(function (item,i,array ) {
            allSettingColumns.push(item.dataIndex);
          })
          this.settingColumns = allSettingColumns;
          this.columns_ = this.defColumns;
        }else{
          this.settingColumns = colSettings;
          const cols = this.defColumns.filter(item => {
            if(item.key =='rowIndex'|| item.dataIndex=='action'){
              return true;
            }
            if (colSettings.includes(item.dataIndex)) {
              return true;
            }
            return false;
          })
          this.columns_ =  cols;
        }
      this.$emit('change', this.columns_)
    },

    //列设置更改事件
    onColSettingsChange(checkedValues) {
        var key = this.$route.name+":colsettings";
        Vue.ls.set(this.ls_key, checkedValues, 7 * 24 * 60 * 60 * 1000)
        this.settingColumns = checkedValues;
        let selectColumns = this.defColumns_
        const cols = selectColumns.filter(item => {
          if(item.key =='rowIndex'|| item.dataIndex=='action'){
            return true
          }
          if (this.settingColumns.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns_ =  cols;
        this.$emit('change', this.columns_)
    },
  },
}
</script>
